<template>
  <div>
    <div class="recommendContainer" v-for="item in recommendList" :key="item.id" @click="toDetail(item.id)">
      <img :src="item.mainImage" alt="" style="margin-right: 15px;">
      <div class="rightContent">
        <div style="font-size:16px;font-weight: 500;margin-bottom:5px;">{{item.title}}</div>
        <div class="contentContainer">
          <div v-html="subStr(item.content)"></div>
        </div>
        <div class="footerArea">
          <span><i class="iconfont icon-dianzan"></i>{{item.praise}}赞</span>
          <span><i class="iconfont icon-pinglun1"></i>{{item.reply}}评论</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    recommendList: {
      type: Array
    }
  },
  methods: {
    toDetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    subStr (str) {
      var imgReg = /<img.*?(?:>|\/>)/g
      var deArray = str.match(imgReg)
      if (deArray !== null && deArray !== undefined) {
        for (let vm of deArray) {
          str = str.replace(vm, '')
        }
      }
      return str
    }
  }
}
</script>

<style scoped>
  .recommendContainer{
    background-color: #fff;
    padding: 10px;
    display: flex;
    border-bottom: 1px solid #eee;
  }
  .recommendContainer:hover{
    background-color: #f7f8f9;
    cursor: pointer;
  }
  .recommendContainer img{
    width: 158px;
    height: 103px;
  }
  .passage{

  }
  .rightContent .footerArea{
  }
  .contentContainer {
    min-height: 70px;
  }
</style>
